<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保洁员信息管理</title>
    <!--bootstrap js样式-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
    <!--1.bootstrap css样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <!--2.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--3.jquery 插件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <link type="text/css" rel="stylesheet" href="../layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="../layui-v2.5.7/layui/layui.js"></script>


    <style>
        .layui-table{
            text-align: center;
        }
    </style>

</head>
<body>
<div class="layui-layout-body" style="border: #282b33 solid 1px">
    <div>
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="">Logo</a></li>
            <li class="layui-nav-item layui-this"><a href="">家政信息平台</a></li>
            <li class="layui-nav-item"></li>
            <li class="layui-nav-item"></li>
            <li class="layui-nav-item"></li>
        </ul>
    </div>

    <div style="float: left; height: 900px; background-color: #282b33">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
            <li class="layui-nav-item"><a href="">订单管理</a></li>
            <li class="layui-nav-item"><a href="">服务项目管理</a></li>
            <li class="layui-nav-item"><a href="">保洁员管理</a></li>
            <li class="layui-nav-item"><a href="">广告管理</a></li>
            <li class="layui-nav-item"><a href="">用户管理</a></li>
            <li class="layui-nav-item"><a href="">系统账号管理</a></li>
        </ul>
    </div>


    <div class="layui-layout-body">
        <div class="clearfloat">
            <div class="glyphicon glyphicon-list col-md-1">数据表</div>
            <a href="cleanerInformationAdd.html">
                <button id="addBtn" type="button" class="layui-btn col-md-1" style="float: right">添加</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
            <a href="recycleBin.html">
                <button type="button" class="layui-btn layui-btn-danger col-md-offset-8"><i class="layui-icon">回收站</i></button>
            </a>
        </div>
        <hr>


        <div class="layui-row">
            <div class="layui-col-md6">
                <!--名字模糊搜索栏-->
                <div class="demoTable">
                    搜索姓名：
                    <div class="layui-inline">
                        <input placeholder="支持模糊查询" class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <div class="layui-col-md6">
                <!--手机号码搜索栏-->
                <div class="demoTable ">
                    搜索手机号码：
                    <div class="layui-inline">
                        <input placeholder="请数据完整手机号码" class="layui-input" name="id" id="exactSelectTelephoneNumber" autocomplete="off">
                    </div>
                    <button id="exactBtn" class="layui-btn" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="showBtn" type="button" class="layui-btn layui-btn-warm">退出搜索</button><br>
                </div>
            </div>
        </div>



        <!--<form class="layui-form">-->
            <!--展示所有数据-->
            <div id="selectAllTable">
                <table class="layui-hide" id="testSelectAllTable" lay-filter="test"></table>
            </div>
            <!--展示模糊查询到的数据-->
            <div id="portionTable">
                <table class="layui-hide" id="testPortionTable" lay-filter="test"></table>
            </div>
            <!--展示手机号码查询到的数据-->
            <div id="telephoneNumberTable">
                <table class="layui-hide" id="testTelephoneNumberTable" lay-filter="test"></table>
            </div>

        <!--</form>-->
    </div>

    <!--//这里是弹出层的表单信息
    //表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
    <div class="layui-row" id="popUpdateTest" style="display:none;">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane" action="" style="margin-top:20px" >


                <h3>修改头像</h3>
                <div class="layui-upload">
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" style="width: 130px; height: 130px; border: #0C0C0C solid 1px;">
                            <img class="layui-upload-img" id="demo1"  style="width: 125px; height: 125px;">
                        </div>
                    </blockquote>
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                </div>


                <!--id-->
                <div class="layui-form-item">
                    <label class="layui-form-label">id <span style="color: red;font-size: 10px">不可修改</span></label>
                    <div class="layui-input-block">
                        <input readonly id="id" type="text" placeholder="不可修改" class="layui-input">
                    </div>
                </div>

                <!--姓名-->
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input id="name" type="text" placeholder="请输入姓名" class="layui-input">
                    </div>
                </div>

                <!--性别-->
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select id="sex" name="eqptType" lay-filter="eqptType">
                            <option value="男">男</option>
                            <option value="女" selected="">女</option>
                        </select>
                    </div>
                </div>

                <!--年龄-->
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input id="age" type="text"  placeholder="请输入年龄" class="layui-input">
                    </div>
                </div>

                <!--手机号码-->
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input id="telephoneNumber" type="text"   placeholder="请输入手机号码" class="layui-input">
                    </div>
                </div>

                <!--信息简介-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">信息简介</label>
                    <div class="layui-input-block">
                        <textarea id="synopsis" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="getCheckData">删除选中行数据</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--展示图片的控件-->
<script type="text/html" id="imgtmp">
    <img src = "http://127.0.0.1:8080{{d.portrait}}">
</script>

<style type="text/css">
    .layui-table-cell{
        height:115px;
        white-space:normal;
    }
</style>

<!--点击退出搜索按钮-->
<script>
    $("#showBtn").click(function (){
        //将展示模糊查询的表格隐藏, 并显示查询所有数据的表格
        $("#portionTable").hide();
        $("#telephoneNumberTable").hide();
        $("#selectAllTable").show();
    })
</script>


<!--展示手机号码查询数据-->
<script>
    $("#exactBtn").click(function (){
        /*将查询所有数据的表格隐藏起来*/
        $("#selectAllTable").hide();
        $("#portionTable").hide();
        $("#telephoneNumberTable").show();
        let telephoneNumber = $("#exactSelectTelephoneNumber").val();

        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;

            let cleaner = {}


            table.render({
                elem: '#testTelephoneNumberTable'
                ,url:'http://localhost:8080/cleanerInformation/controller/CleanerVagueSelectTelephoneNumber'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,where:{
                    telephoneNumber:telephoneNumber
                }
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', width:150, title: 'ID', sort: true}
                    ,{field:'portrait',
                        title: '头像',
                        width:150,
                        templet:"#imgtmp"
                    }
                    ,{field:'name', width:150, title: '姓名', sort: true}
                    ,{field:'sex', width:150, title: '性别'}
                    ,{field:'age',width:150, title: '年龄'}
                    ,{field:'telephoneNumber', width:150, title: '手机号码', sort: true}
                    ,{field:'synopsis', width:570, title: '简介', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true

            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'getCheckData'){
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteAllController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:JSON.stringify(data),//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"POST",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;//获得当前行数据
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();



                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:data.id,//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"GET",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });

                        layer.close(index);

                    });
                } else if(obj.event === 'edit'){

                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "信息修改",
                        area: ['420px', '500px'],
                        content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
                        success: function (layero, index) {//弹出层打开后的回调函数,数据回显
                            layer.iframeAuto(index);
                            //popUpdateTest为弹出层id,name为数据表格的field属性
                            //信息回显
                            $("#id").val(data.id);
                            $("#name").val(data.name);
                            $("#sex").val(data.sex);
                            $("#age").val(data.age);
                            $("#telephoneNumber").val(data.telephoneNumber);
                            $("#synopsis").val(data.synopsis);
                        },
                    });

                }
            });



            form.on('submit(demo11)', function(massage) {

                cleaner = {

                    id:$("#id").val(),
                    name:$("#name").val(),
                    sex:$("#sex").val(),
                    age:$("#age").val(),
                    telephoneNumber:$("#telephoneNumber").val(),
                    synopsis:$("#synopsis").val()
                }

                $.ajax({
                    //请求的url地址
                    url: "http://localhost:8080/cleanerInformation/controller/CleanerUpdateController",
                    //要求服务器响应的数据格式
                    dataType: "json",
                    //请求是否为异步,  true为异步,   false为同步
                    async: true,
                    //发送请求给服务器所携带的数据
                    data:{
                        message:JSON.stringify(cleaner)
                    },
                    //设置请求方式
                    type:"POST",
                    success:function (result) {
                        if(result.status === 200){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function(){
                                obj.update({
                                    /*eqptType:massage.field.neweqptType,
                                    eqptIdCode:massage.field.neweqptIdCode,
                                    eqptName:massage.field.neweqptName*/
                                });//修改成功修改表格数据不进行跳转
                                layer.closeAll();//关闭所有的弹出层
                            }, 1000);
                            加载层-风格
                        }else{
                            //layer.msg("修改失败", {icon: 5});
                        }
                    }
                });
            });


        });
    })
</script>


<!--展示模糊查询数据-->
<script>
    $("#searchBtn").click(function (){
        /*将查询所有数据的表格隐藏起来*/
        $("#selectAllTable").hide();
        $("#telephoneNumberTable").hide();
        $("#portionTable").show();
        let name = $("#demoReload").val();

        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;

            let cleaner = {}


            table.render({
                elem: '#testPortionTable'
                ,url:'http://localhost:8080/cleanerInformation/controller/CleanerVagueSelectNameController'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,where:{
                    name:name
                }
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', width:150, title: 'ID', sort: true}
                    ,{field:'portrait',
                        title: '头像',
                        width:150,
                        templet:"#imgtmp"
                    }
                    ,{field:'name', width:150, title: '姓名', sort: true}
                    ,{field:'sex', width:150, title: '性别'}
                    ,{field:'age',width:150, title: '年龄'}
                    ,{field:'telephoneNumber', width:150, title: '手机号码', sort: true}
                    ,{field:'synopsis', width:570, title: '简介', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true

            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'getCheckData'){
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteAllController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:JSON.stringify(data),//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"POST",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;//获得当前行数据
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();



                        $.ajax({
                            //请求的url地址
                            url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteController",
                            //要求服务器响应的数据格式
                            dataType: "json",
                            //请求是否为异步,  true为异步,   false为同步
                            async: true,
                            //发送请求给服务器所携带的数据
                            data:{
                                message:data.id,//向服务端发送删除的id
                            },
                            //设置请求方式
                            type:"GET",
                            //请求成功的处理
                            success:function (result){
                                //如果响应的状态码为200证明添加数据的请求成功
                                if(result.status === 200){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("删除成功",{icon:1});
                                }else{
                                    alert("删除失败")
                                }
                            }
                        });

                        layer.close(index);

                    });
                } else if(obj.event === 'edit'){

                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "信息修改",
                        area: ['420px', '500px'],
                        content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
                        success: function (layero, index) {//弹出层打开后的回调函数,数据回显
                            layer.iframeAuto(index);
                            //popUpdateTest为弹出层id,name为数据表格的field属性
                            //信息回显
                            $("#id").val(data.id);
                            $("#name").val(data.name);
                            $("#sex").val(data.sex);
                            $("#age").val(data.age);
                            $("#telephoneNumber").val(data.telephoneNumber);
                            $("#synopsis").val(data.synopsis);
                        },
                    });

                }
            });



            form.on('submit(demo11)', function(massage) {

                cleaner = {
                    id:$("#id").val(),
                    name:$("#name").val(),
                    sex:$("#sex").val(),
                    age:$("#age").val(),
                    telephoneNumber:$("#telephoneNumber").val(),
                    synopsis:$("#synopsis").val()
                }

                $.ajax({
                    //请求的url地址
                    url: "http://localhost:8080/cleanerInformation/controller/CleanerUpdateController",
                    //要求服务器响应的数据格式
                    dataType: "json",
                    //请求是否为异步,  true为异步,   false为同步
                    async: true,
                    //发送请求给服务器所携带的数据
                    data:{
                        message:JSON.stringify(cleaner)
                    },
                    //设置请求方式
                    type:"POST",
                    success:function (result) {
                        if(result.status === 200){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function(){
                                obj.update({
                                    /*eqptType:massage.field.neweqptType,
                                    eqptIdCode:massage.field.neweqptIdCode,
                                    eqptName:massage.field.neweqptName*/
                                });//修改成功修改表格数据不进行跳转
                                layer.closeAll();//关闭所有的弹出层
                            }, 1000);
                            加载层-风格
                        }else{
                            //layer.msg("修改失败", {icon: 5});
                        }
                    }
                });
            });


        });
    })
</script>




<!--展示所有数据-->
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        let cleaner = {}


        table.render({
            elem: '#testSelectAllTable'
            ,url:'http://localhost:8080/cleanerInformation/controller/CleanerSelectController'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id',width:150, title: 'ID', sort: true}
                ,{field:'portrait',
                    title: '头像',
                    width:150,
                    templet:"#imgtmp"
                }
                ,{field:'name', width:150,title: '姓名', sort: true}
                ,{field:'sex', width:150, title: '性别'}
                ,{field:'age',width:150, title: '年龄'}
                ,{field:'telephoneNumber',width:150,  title: '手机号码', sort: true}
                ,{field:'synopsis',width:570,  title: '简介', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true

        });



        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'getCheckData'){
                var data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        //请求的url地址
                        url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteAllController",
                        //要求服务器响应的数据格式
                        dataType: "json",
                        //请求是否为异步,  true为异步,   false为同步
                        async: true,
                        //发送请求给服务器所携带的数据
                        data:{
                            message:JSON.stringify(data),//向服务端发送删除的id
                        },
                        //设置请求方式
                        type:"POST",
                        //请求成功的处理
                        success:function (result){
                            //如果响应的状态码为200证明添加数据的请求成功
                            if(result.status === 200){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功",{icon:1});
                            }else{
                                alert("删除失败")
                            }
                        }
                    });
                    layer.close(index);
                    window.location.href = "cleanerInformationManage.html"
                });
            }
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;//获得当前行数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //obj.del();



                    $.ajax({
                        //请求的url地址
                        url: "http://localhost:8080/cleanerInformation/controller/CleanerDeleteController",
                        //要求服务器响应的数据格式
                        dataType: "json",
                        //请求是否为异步,  true为异步,   false为同步
                        async: true,
                        //发送请求给服务器所携带的数据
                        data:{
                            message:data.id,//向服务端发送删除的id
                        },
                        //设置请求方式
                        type:"GET",
                        //请求成功的处理
                        success:function (result){
                            //如果响应的状态码为200证明添加数据的请求成功
                            if(result.status === 200){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功",{icon:1});
                            }else{
                                alert("删除失败")
                            }
                        }
                    });

                    layer.close(index);

                });
            } else if(obj.event === 'edit'){

                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "信息修改",
                    area: ['420px', '500px'],
                    content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
                    success: function (layero, index) {//弹出层打开后的回调函数,数据回显
                        layer.iframeAuto(index);
                        //popUpdateTest为弹出层id,name为数据表格的field属性
                        //信息回显
                        $("#id").val(data.id);
                        $("#name").val(data.name);
                        $("#sex").val(data.sex);
                        $("#age").val(data.age);
                        $("#telephoneNumber").val(data.telephoneNumber);
                        $("#synopsis").val(data.synopsis);
                    },
                });

            }
        });



        form.on('submit(demo11)', function(massage) {

            cleaner = {
                id:$("#id").val(),
                name:$("#name").val(),
                sex:$("#sex").val(),
                age:$("#age").val(),
                telephoneNumber:$("#telephoneNumber").val(),
                synopsis:$("#synopsis").val()
            }

            $.ajax({
                //请求的url地址
                url: "http://localhost:8080/cleanerInformation/controller/CleanerUpdateController",
                //要求服务器响应的数据格式
                dataType: "json",
                //请求是否为异步,  true为异步,   false为同步
                async: true,
                //发送请求给服务器所携带的数据
                data:{
                    message:JSON.stringify(cleaner)
                },
                //设置请求方式
                type:"POST",
                success:function (result) {
                    if(result.status === 200){
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.msg("修改成功", {icon: 6});
                        setTimeout(function(){
                            obj.update({
                                /*eqptType:massage.field.neweqptType,
                                eqptIdCode:massage.field.neweqptIdCode,
                                eqptName:massage.field.neweqptName*/
                            });//修改成功修改表格数据不进行跳转
                            layer.closeAll();//关闭所有的弹出层
                        }, 1000);
                        加载层-风格
                    }else{
                        //layer.msg("修改失败", {icon: 5});
                    }
                }
            });
        });


    });
</script>

<!--图片上传-->
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var $ = layui.jquery
            , upload = layui.upload;
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        /* http://localhost:8080/cleanerInformation/controller/CleanerImagesController*/
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'http://localhost:8080/cleanerInformation/controller/CleanerUpdateImagesController' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传成功
                if(res.code === 200){
                    return layer.msg('上传成功');
                }
            }
        });

    });
</script>

</body>

</html>